<template>
	<view class="page flex-col">
		<!-- 微信浏览器 -->
		<view class="section_2 flex-col" v-if="isWeiXin==true">
			<view class="image-text_1 flex-col">
				<view class="group_0 flex-col"></view>
				<text class="text-group_1">法力APP</text>
			</view>
			<button class="button_1 flex-col" @click="onClick_1">
				<text class="text_1">下载/打开法力APP</text>
			</button>
		</view>
		<!-- 微信浏览器 -->
		<!-- 	普通浏览器 -->
		<view class="section_2 flex-col" v-if="isWeiXin==false&&!showLoading">
			<view class="image-text_1 flex-col">
				<view class="group_0 flex-col"></view>
				<text class="text-group_1">法力APP</text>
			</view>
			<button class="button_1 flex-col" @click="downFlzx">
				<text class="text_1">下载法力APP</text>
			</button>
			<button class="button_2 flex-col" @click="btnFlzx">
				<text class="text_2">已安装，立即打开</text>
			</button>
		</view>
		<!-- 	普通浏览器 -->

		<!-- 	普通浏览器 -->
		<view class="loading flex-col" v-if="showLoading">
			<view class="loading-tips">
				<view class="">正在打开法力APP </view>
				<view class="">若有弹窗，请点击<text>允许/打开</text>按钮 </view>
			</view>
			<view class="loading-icon">
				<u-loading mode="circle" size="70" color="#FDC902"></u-loading>
			</view>
		</view>
		<!-- 	普通浏览器 -->

		<view class="section_3 flex-col" v-if="show">
			<view class="image-wrapper_2 flex-row justify-between" @click="closeShow">
				<image class="label_1" referrerpolicy="no-referrer" src="../../../static/img/down/close.png" />
				<image class="image_4" referrerpolicy="no-referrer" src="../../../static/img/down/jt.png" />
			</view>
			<view class="text-group_2 flex-col">
				<text class="text_4">1、点击屏幕右上角“...”</text>
				<text class="text_5">2、选择在浏览器中打开。</text>
			</view>
			<view class="section_4 flex-row">
				<view class="group_1">
					<image class="label_2" referrerpolicy="no-referrer" src="../../../static/img/down/zfpy.png" />
					<text class="text_6">转发给朋友</text>
				</view>
				<view class="group_2" style="max-width: 60px;">
					<view class="section_5 flex-col">
						<image class="label_3" referrerpolicy="no-referrer" src="../../../static/img/down/pyq.png" />
						<text class="text_6">分享到朋友圈</text>
					</view>
				</view>
				<view class="group_3">
					<view class="flex-row justify-between">
						<image class="image_5" referrerpolicy="no-referrer" src="../../../static/img/down/llq.png" />
					</view>
					<text class="text_6" style="color: #000000;margin-top: 10px;font-size: 14px;">在浏览器中打开</text>
				</view>
				<view class="group_4">
					<image class="label_4" referrerpolicy="no-referrer" src="../../../static/img/down/sc.png" />
					<text class="text_6">&nbsp;&nbsp;收藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
				</view>
				<view class="group_5">
					<image class="label_5" referrerpolicy="no-referrer" src="../../../static/img/down/qywx.png" />
					<text class="text-group_4">
						<text class="wrap">分享到<br />企业微信</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				constants: {},
				isWeiXin: false,
				showLoading: false
			};
		},
		created() {
			// 安卓
			this.isWeiXinLogin()
		},
		onLoad() {
			var brand = this.judgeBrand(window.navigator.userAgent.toLowerCase()); //调用机型判断
			this.brand = brand;
			console.log("手机牌子" + this.brand);
		},
		methods: {
			//判断是否微信登陆
			isWeiXinLogin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					this.isWeiXin = true; // 微信中打开
					return;
				} else {
					this.isWeiXin = false; // 普通浏览器中打开
					return;
				}
			},
			onClick_1() {
				this.show = true;
			},
			downFlzx() {
				// 点击确认按钮点击事件
				// let osName = plus.os.name;
				if (this.brand == "iphone") {
					let appStoreScheme = "itms-apps://itunes.apple.com/app/id1462724492"
					window.location.href = appStoreScheme;
					plus.runtime.openURL(appStoreScheme, (res) => {
						uni.showToast({
							title: "AppStore打开失败，请自行前往下载。",
							icon: "none"
						})
					});
				} else {
					if (this.brand == "xiaomi" || this.brand == "mi" || this.brand == "redmi" || this.brand == "mix") {
						window.location.href = 'mimarket://details?id=com.lifakeji.lark.business.law'
						return;
					}
					if (this.brand == "huawei") {
						window.location.href = 'appmarket://details?id=com.lifakeji.lark.business.law'
						return;
					}
					if (this.brand == "oppo") {
						window.location.href = 'oppomarket://details?id=com.lifakeji.lark.business.law'
						return;
					}
					if (this.brand == "vivo") {
						window.location.href = 'vivomarket://details?id=com.lifakeji.lark.business.law'
						return;
					}
					// 安卓直接打开应用宝的URL
					plus.runtime.openURL("https://a.app.qq.com/o/simple.jsp?pkgname=com.lifakeji.lark.business.law");
				}
			},
			//打开第三方app
			btnFlzx() {
				let that = this;
				if (this.brand == "iphone") {
					let appStoreScheme = "fali://open_app"
					that.showLoading = true;
					window.location.href = appStoreScheme;
					setTimeout(function() {
						uni.showToast({
							title: "APP打开失败，请自行前往商店下载。",
							icon: "none"
						})
						that.showLoading = false;
						that.downFlzx();
					}, 3000);
				} else {
					let appStoreScheme = "fali://open_app"
					that.showLoading = true;
					window.location.href = appStoreScheme;
					setTimeout(function() {
						uni.showToast({
							title: "APP打开失败，请自行前往商店下载。",
							icon: "none"
						})
						that.showLoading = false;
						that.downFlzx();
					}, 3000);
				}

				//判断app是否存在
				// if (plus.runtime.isApplicationExist({
				// 		pname: 'com.lifakeji.lark.business.law'
				// 	})) {
				// 	this.showLoading=true;
				// 	window.location.href = 'pkgname=com.lifakeji.lark.business.law'
				// 	console.log("该app已安装")
				// } else {
				// 	uni.showToast({
				// 		title: "APP未安装",
				// 		icon: "none"
				// 	})
				// 	//跳转到下载页面
				// 	window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.lifakeji.lark.business.law'
				// }
			},
			openApp() {
				window.location.href = 'pkgname=com.lifakeji.lark.business.law'
			},
			closeShow() {
				this.show = false;
			},
			onClick_2() {
				alert(1);
			},

			judgeBrand(sUserAgent) {

				var isIphone = sUserAgent.match(/iphone/i) == "iphone";
				var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
				var isHonor = sUserAgent.match(/honor/i) == "honor";
				var isOppo = sUserAgent.match(/oppo/i) == "oppo";
				var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
				var isVivo = sUserAgent.match(/vivo/i) == "vivo";
				var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
				var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
				var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
				var isSamsung = sUserAgent.match(/sm-/i) == "sm-";

				if (isIphone) {
					return 'iphone';
				} else if (isHuawei || isHonor) {
					return 'huawei';
				} else if (isOppo || isOppoR15) {
					return 'oppo';
				} else if (isVivo) {
					return 'vivo';
				} else if (isXiaomi || isRedmi || isXiaomi2s) {
					return 'xiaomi';
				} else if (isSamsung) {
					return 'samsung';
				} else {
					return 'default';
				}
			}
		},
	};
</script>
<style>
	/* @import './common.css';
@import './index.rpx.css'; */
</style>
<style>
	body * {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	body {
		font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
			Arial, PingFang SC-Light, Microsoft YaHei;
	}

	button {
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		outline: none;
		background-color: transparent;
	}

	button:active {
		opacity: 0.6;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.align-start {
		display: flex;
		align-items: flex-start;
	}

	.align-center {
		display: flex;
		align-items: center;
	}

	.align-end {
		display: flex;
		align-items: flex-end;
	}

	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 4px;
	}


	.section_2 {
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 10vh;
	}

	.image-text_1 {}

	.group_0 {
		border-radius: 15px;
		background-image: url(../../../static/img/down_logo.png);
		width: 80px;
		height: 80px;
	}

	.text-group_1 {
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 22px;
		margin-top: 20rpx;
	}

	.button_1 {
		background-color: rgba(253, 201, 2, 1);
		margin-top: 100rpx;
		width: 80vw;
		height: 55px;
	}

	.text_1 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		font-weight: NaN;
		text-align: center;
		white-space: nowrap;
		line-height: 55px;
	}

	.button_2 {
		border: 1px solid rgba(253, 201, 2, 1);
		margin-top: 50rpx;
		width: 80vw;
		height: 55px;
	}

	.text_2 {
		overflow-wrap: break-word;
		color: rgba(253, 201, 2, 1);
		font-size: 16px;
		font-weight: NaN;
		text-align: center;
		white-space: nowrap;
		line-height: 55px;
	}

	.image-wrapper_1 {
		background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/88b30e6197084ffc8f8a204b73d87c4c_mergeImage.png);

	}

	.image_1 {
		width: 375px;
		height: 34px;
	}

	.section_3 {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		/* left: 0; */
		top: 0px;
		width: 100%;
		height: 100vh;
	}

	.image-wrapper_2 {
		/* width: 304px; */
		margin: 10px 14px 0 22px;
	}

	.label_1 {
		width: 28px;
		height: 28px;
		margin-top: 49px;
	}

	.image_4 {
		width: 73px;
		height: 54px;
		margin-bottom: 23px;
	}

	.text-group_2 {
		width: 232px;
		align-self: center;
		margin-top: 69px;
	}

	.text_4 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 28px;
		margin: 0 12px 0 11px;
	}

	.text_5 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 28px;
		margin-top: 15px;
	}

	.section_4 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10px;
		margin-top: 10px;
		padding: 15px 17px 15px 14px;
		display: flex;
		flex-direction: row;
		width: 90vw;
		margin: 20px 5vw;
		justify-content: space-between;
		align-items: flex-start;
	}

	.image-text_2 {
		/*  margin-bottom: 19px; */
	}

	.label_2 {
		width: 50px;
		height: 50px;
		align-self: center;
	}

	.text-group_3 {
		overflow-wrap: break-word;
		color: rgba(119, 119, 119, 1);
		font-size: 10px;
		font-weight: NaN;
		text-align: right;
		white-space: nowrap;
		line-height: 14px;
		margin-top: 5px;
	}

	.group_1 {
		width: 15vw;
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.group_2 {
		width: 15vw;
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.group_3 {
		width: 15vw;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.group_4 {
		width: 15vw;
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.group_5 {
		width: 15vw;
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.section_5 {}

	.label_3 {
		width: 50px;
		height: 50px;
		align-self: center;
	}

	.text_6 {
		overflow-wrap: break-word;
		color: rgba(119, 119, 119, 1);
		font-size: 10px;
		font-weight: NaN;
		text-align: center;
		white-space: nowrap;
		line-height: 14px;
		margin-top: 5px;
		transform: scale(0.7);
	}

	.image_5 {
		width: 60px;
		height: 60px;
		/* 	 */
	}

	.text_7 {
		overflow-wrap: break-word;
		color: rgba(17, 17, 17, 1);
		font-size: 12px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 17px;
	}



	.label_4 {
		width: 50px;
		height: 50px;
	}

	.text_8 {
		overflow-wrap: break-word;
		color: rgba(119, 119, 119, 1);
		font-size: 10px;
		font-weight: NaN;
		text-align: right;
		white-space: nowrap;
		line-height: 14px;
		align-self: center;
		margin-top: 5px;
	}

	.image-text_3 {
		/* margin: 0 0 5px 19px; */
	}

	.label_5 {
		width: 50px;
		height: 50px;
	}

	.text-group_4 {
		width: 40px;
		height: 28px;
		overflow-wrap: break-word;
		color: rgba(119, 119, 119, 1);
		font-size: 10px;
		font-weight: NaN;
		text-align: center;
		line-height: 14px;
		margin-top: 5px;
		transform: scale(0.7);
	}

	.text-group_4 text {
		white-space: nowrap;
		text-align: center;
		line-height: 15px;
		font-size: 10px;
		transform: scale(0.7);
	}

	.loading {
		position: absolute;
		/* left: 0; */
		top: 0px;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.loading-tips {
		margin-top: 15vh;
		font-size: 20px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #000000;
		line-height: 28px;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.loading-tips text {
		color: #FF0000;
		padding: 0 10rpx;
	}

	.loading-icon {
		background-color: #FAFAFA;
		width: 100px;
		height: 100px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 150rpx;
	}
</style>
